<template>
  <div ref="chart">
  </div>
</template>

<script>
  import echarts from 'echarts';

  export default {
    name: 'Temp',
    data() {
      return {
        chart: '',
        data: [],
        option: {
          title: {
            text:'液位状态'
          },
          grid: {
            top: '24%',
            left: '7%',
            bottom: '6%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            show: true,
            data: (function () {
              var now = new Date();
              var res = [];
              var len = 10;
              while (len--) {
                res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
                now = new Date(now - 2000);
              }
              return res;
            })(),
            axisLabel: {
              textStyle: {
                color: '#b6b5ab'
              }
            }
          },
          yAxis: {
            type:'value',
            show: true,
            offset: 30,
          },
          color: ['#e54035'],
          series: [{
            name: '训练人次',
            type: 'pictorialBar',
            barCategoryGap: '-80%',
            // barCategoryGap: '-5%',
            symbol: 'path://d="M150 50 L130 130 L170 130  Z"',
            itemStyle: {
              normal: {
                color: function(params) {
                  let colorList = [
                    'rgba(13,177,205,0.8)', 'rgba(29,103,182,0.6)',
                    'rgba(13,177,205,0.8)', 'rgba(29,103,182,0.6)',
                    'rgba(13,177,205,0.8)', 'rgba(29,103,182,0.6)'
                  ];
                  return colorList[params.dataIndex];
                }
              },
              emphasis: {
                opacity: 1
              }
            },
            data: (function () {
              var res = [];
              var len = 10;
              while (len--) {
                res.push(Math.round(Math.random() * 100));
              }
              return res;
            })()
          },
            {
              symbol: 'image://',
              symbolSize: 42,
              name: "完成率",
              type: "line",
              data: (function () {
                var res = [];
                var len = 10;
                while (len--) {
                  res.push(Math.round(Math.random() * 100));
                }
                return res;
              })(),
              itemStyle: {
                normal: {
                  borderWidth: 5,
                  color: {
                    colorStops: [{
                      offset: 0,
                      color: '#821eff'
                    },

                      {
                        offset: 1,
                        color: '#204fff'
                      }
                    ],
                  }
                }
              }
            }
          ]
        }
      };
    },
    mounted() {
      this.chart = echarts.init(this.$refs['chart']);
      this.chart.setOption(this.option, true);
      var chart = this.chart;
      var one = this.option;
      setInterval(function () {
        let axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');
        let data0 = one.series[0].data;
        let data1 = one.series[1].data;
        data0.shift();
        data0.push(Math.round(Math.random() * 100));
        data1.shift();
        data1.push((Math.random() * 10 + 5).toFixed(1) - 0);
        one.xAxis.data.shift();
        one.xAxis.data.push(axisData);
        chart.setOption(one);
      }, 1000);
    }
  };
</script>

<style scoped>
  .m-map {
    width: 100%;
    height: 100%;
  }
</style>
